<script setup>
import { queryPreregisterApp } from '@/api/Base/preregister';
import useAppStore from '@/stores/modules/app';
import { to } from '@/utils/routerUtil';
import { format, subMonths, addDays, parseISO } from 'date-fns';

definePage({
  name: 'preregisterarrive',
  meta: {
  },
})
const load = ref(false)

const arriveObj = reactive({
  search: {
    searchText: "",//登记号,料号,设备名称,
    startTime: format(subMonths(new Date(), 3), "yyyy-MM-dd"),
    endTime: format(new Date(), "yyyy-MM-dd"),
    active: 0
  },
  model: {
    startTime: {
      show: false,
    },
    endTime: {
      show: false,
    }
  },
  list: [],
  reload: () => {
    queryPreregisterApp({
      page: 1,
      pageSize: 999999,
      startTime: arriveObj.search.startTime,
      endTime: format(addDays(parseISO(arriveObj.search.endTime), 1), 'yyyy-MM-dd'),
      keyword: arriveObj.search.searchText,
      status: arriveObj.search.active,
      _t: new Date().getTime()
    }).then(res => {
      if (res.code == 0) {
        // Define status mappings for each tab
        const statusMappings = {
          0: null, // All
          1: '待确认', // Pending Confirmation
          2: '待测试', // Pending Testing
          3: '待入库', // Pending Storage
          4: '已处理' // Processed
        };

        arriveObj.list = res.data.list
          .filter(item => {
            const targetStatus = statusMappings[arriveObj.search.active];
            return targetStatus === null || item.zType === targetStatus;
          })
          .map(it => ({
            ...it,
            Type: it.nType
          }));
      }
    })
  }
})

const router = useRouter()

// Watch for active tab changes
watch(
  () => arriveObj.search.active,
  () => {
    arriveObj.reload();
  }
);

// Watch for other search criteria changes
watch(
  () => [arriveObj.search.startTime, arriveObj.search.endTime, arriveObj.search.searchText],
  () => {
    arriveObj.reload();
  }
);

function onBack() {
  if (window.history.state.back)
    history.back()
  else
    router.replace('/')
}

onMounted(() => {
  arriveObj.reload()
})

function getLabelByValue(value) {
  switch (value) {
    case 0:
      return '客户退换';
    case 1:
      return '客户送修';
    case 2:
      return '客供料';
    case 3:
      return '进货物料';
    case 4:
      return '外修送回';
    case 5:
      return '代工交货';
    case 7:
      return 'PCB';
    case 6:
      return '其他';
    default:
      return '未知';
  }
}

function getColorByValue(value) {
  switch (value) {
    case 0: // 客户退换
      return '#ff7f50';
    case 1: // 客户送修
      return '#1e90ff';
    case 2: // 客供料
      return '#32cd32';
    case 3: // 进货物料
      return '#ffa500';
    case 4: // 外修送回
      return '#9370db';
    case 5: // 代工交货
      return '#20b2aa';
    case 7: // PCB
      return '#ff69b4';
    case 6: // 其他
      return '#a9a9a9';
    default:
      return '#fdc71c';
  }
}

async function scan() {
  const res = await pro.scannerCode()
  arriveObj.search.searchText = res
}

function getStatusByValue(value) {
  // 使用switch语句来匹配值并返回相应的标签
  switch (value) {
    case 1:
      return '待维修';
    case 2:
      return '维修中';
    case 3:
      return '维修完成';
    case 4:
      return '无法修复';
    case 5:
      return '暂停';
    case 6:
      return '需外修';
    case 7:
      return '外修中';
    case 8:
      return '已取消';
    case 9:
      return '借用参考';
    default:
      return '未知';
  }
}

</script>

<template>
  <div>
    <VanNavBar :fixed="true" clickable left-arrow @click-left="onBack">
      <template #title>
        <div class="flex flex-row gap-8">
          <van-search class="search" shape="round" v-model="arriveObj.search.searchText" placeholder="请输入品名/料号/登记号" />
        </div>


      </template>
      <template #right>
        <div class="flex justify-center items-center">
          <van-image @click="scan" width="16" height="16" src="/productManager/扫码.png" />
        </div>
      </template>
    </VanNavBar>
    <van-tabs class="bg-#f2f4f8 mt-[43px]" v-model:active="arriveObj.search.active">
      <div class="p-10px flex flex-row gap-20 bg-white rounded-[10px] m-10">
        <h1 @click="arriveObj.model.startTime.show = true" class="text-15px">开始时间:{{ arriveObj.search.startTime }}</h1>
        <h1 @click="arriveObj.model.endTime.show = true" class="text-15px">结束时间:{{ arriveObj.search.endTime }}</h1>
      </div>
      <van-popup v-model:show="arriveObj.model.startTime.show" position="bottom">
        <van-date-picker :model-value="arriveObj.search.startTime.split('-')" @confirm="({ selectedValues }) => {
          arriveObj.search.startTime = selectedValues.join('-');
          arriveObj.model.startTime.show = false
        }" @cancel="arriveObj.model.startTime.show = false" />
      </van-popup>
      <van-popup v-model:show="arriveObj.model.endTime.show" position="bottom">
        <van-date-picker :model-value="arriveObj.search.endTime.split('-')" @confirm="({ selectedValues }) => {
          arriveObj.search.endTime = selectedValues.join('-');
          arriveObj.model.endTime.show = false
        }" @cancel="arriveObj.model.endTime.show = false" />
      </van-popup>

      <van-tab title="全部" class="m-[10px] w-[100vw] flex flex-col gap-[10px]">
        <PreregisterItem v-for="item in arriveObj.list" :key="item.sPreregisterNo" :item="item" />
      </van-tab>
      <van-tab title="待确认" class="m-[10px] w-[100vw] flex flex-col gap-[10px]">
        <PreregisterItem v-for="item in arriveObj.list" :key="item.sPreregisterNo" :item="item" />
      </van-tab>
      <van-tab title="待测试" class="m-[10px] w-[100vw] flex flex-col gap-[10px]">
        <PreregisterItem v-for="item in arriveObj.list" :key="item.sPreregisterNo" :item="item" />
      </van-tab>
      <van-tab title="待入库" class="m-[10px] w-[100vw] flex flex-col gap-[10px]">
        <PreregisterItem v-for="item in arriveObj.list" :key="item.sPreregisterNo" :item="item" />
      </van-tab>
      <van-tab title="已处理" class="m-[10px] w-[100vw] flex flex-col gap-[10px]">
        <PreregisterItem v-for="item in arriveObj.list" :key="item.sPreregisterNo" :item="item" />
      </van-tab>
    </van-tabs>
  </div>
</template>

<style lang="less" scoped>
.search {
  // width: 110px;
  height: 2rem;
  border-radius: 5px;
  opacity: 1;

  /* 纯白 */
  background: #FFFFFF;

}
</style>
